<template>
    <div class="app-container">
      <div class="search">
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="">
          <el-select v-model="form.executeStatus" placeholder="测试状态">
            <el-option label="未执行" value="0"></el-option>
            <el-option label="已执行" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" >
          <el-date-picker
            v-model="form.time"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" >
          <el-input placeholder="创建人员" v-model="form.person" />
        </el-form-item>
        <el-form-item label="" >
          <el-input placeholder="场景名称" v-model="form.sceneName" />
        </el-form-item>
        <el-form-item label="" >
          <el-button size="mini" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-text="加载中"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="ID" width="95">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="场景名称">
          <template slot-scope="scope">
            {{ scope.row.sceneName }}
          </template>
        </el-table-column>
        <el-table-column label="场景描述" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.author }}</span>
          </template>
        </el-table-column>
        <el-table-column label="测试开始时间" width="130" align="center">
          <template slot-scope="scope">
            {{ scope.row.sceneStartTime }}
          </template>
        </el-table-column>
        <el-table-column label="测试结束时间" width="130" align="center">
          <template slot-scope="scope">
            {{ scope.row.sceneEndTime }}
          </template>
        </el-table-column>
        <el-table-column class-name="测试状态" label="测试状态" width="110" align="center">
          <template slot-scope="scope">
          <span v-if="scope.row.executeStatus == 0" class="green-tag">未执行</span>
          <span v-if="scope.row.executeStatus == 1" class="other-tag">已执行</span>
          <span v-if="scope.row.executeStatus == 2" class="other-tag">执行中</span>
          <span v-if="scope.row.executeStatus == 3" class="red-tag">执行异常</span>
            <!-- <el-tag :type="scope.row.executeStatus | statusFilter">{{ scope.row.executeStatus == 0 ?'已调用': '未调用' }}</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column label="故障记录" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.author }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="200">
          <template slot-scope="scope">
            
            <el-button class="detail"><img src="../../assets/img/watch.svg" />详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </template>
  
  <script>
  import { sceneTestRecordList } from '@/api/table'
  import { removeRecord } from '@/api/form'
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        form: {},
        list: null,
        form: {
      },
      currentPage: 1,
        pageNum: 10,
        total: 0,
        multipleSelection: [],
        listLoading: true
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      
      deleteRow() {
        removeRecord({ ids: this.multipleSelection.map(item => item.sceneId).join(',')}).then(res => {
          console.log(res)
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    handleSizeChange(val) {
        this.pageNum = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData()
      },
      fetchData() {
        this.listLoading = true
        sceneTestRecordList({pageSize:this.pageNum,
          pageNum: this.currentPage,
          ...this.form
            }).then(res => {
        this.list = res.rows
        this.total = res.total
        this.listLoading = false
      })
      }
    }
  }
  </script>
  